<template>
  <div class="home">
    <dv-full-screen-container class="bg">
      <div class="header"></div>
      <div class="main">
        <div class="left">
          <Panel title="数据归集情况">
              <DataMerger />
          </Panel>
          <Panel title="数据接入情况" class="mt23">
              <DataAccessChart />
          </Panel>
        </div>
        <div class="center">
          <DataCenter />
          <DataCenterChart />
          <Panel title="一件事一次办上线情况" class="mt23">
            <OnLineChart />
          </Panel>
        </div>
        <div class="right">
          <Panel title="颗粒化解构情况">
                <DeconstructionChart />
          </Panel>
          <Panel title="材料类型情况" class="mt23">
            <MaterialsChart />
          </Panel>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
<script>
import Panel from "@/components/panel";
import DataMerger from "./components/DataMerger.vue";
import DataMergerChart from "./components/DataMergerChart.vue";
import DataAccessChart from "./components/DataAccessChart.vue";
import OnLineChart from "./components/OnLineChart.vue";
import DeconstructionChart from "./components/DeconstructionChart.vue";
import MaterialsChart from "./components/MaterialsChart.vue";
import DataCenter from "./components/DataCenter.vue";
import DataCenterChart from "./components/DataCenterChart.vue";
export default {
  data() {
    return {};
  },
  components: {
    Panel,
    DataMerger,
    DataMergerChart,
    DataAccessChart,
    OnLineChart,
    DeconstructionChart,
    MaterialsChart,
    DataCenter,
    DataCenterChart,
  },
};
</script>
  
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
}

.bg {
  background: url("@/assets/bg.png");
  background-size: 100%;
  background-position: center center;
}

.header {
  width: 100%;
  background: url("@/assets/header.png") no-repeat;
  background-size: 100%;
  height: 110px;
}

.main {
  width: auto;
  padding: 0 10px;
  height: calc(100vh - 110px);
  display: flex;

  .left {
    flex: 1;
    margin-right: 30px;
    overflow: hidden;
  }

  .center {
    flex: 1;
    margin-right: 24px;
    display: flex;
    flex-direction: column;
  }

  .right {
    flex: 1;
  }
}

.mt23 {
  margin-top: 23px;
  overflow: hidden;
}
.dataMergerdown {
  // width: 615px;

  // height: 516px;
  // padding: 20px 15px;

  // box-sizing: border-box;
}
.DataAccessChartBox {
  // width: 615px;
  // height: 331.63px;
}
</style>
  